<template>
  <div>
    <el-row class="acp-dashboard-panel" :gutter="20">

        <el-col :span="12">

          <div class="grid-content">
            <div class="panel-header">
              <div class="header-title"><i class="fa-solid fa-fire"></i> 数据存储趋势 </div>
            </div>
            <div class="panel-body acp-height-auto">
          <div class="box-header">
            <el-row>
              <el-col :span="24">
                <div class="sidecard-bar">
                  <div
                    id="echarts-bar2-chart"
                    :style="{ width: '100%', height: '250px' }"
                  ></div>
                </div>
              </el-col>
            </el-row>
          </div>
            </div>
          </div>

        </el-col>

        <el-col :span="6">

          <div class="grid-content">
            <div class="panel-header">
              <div class="header-title"><i class="fa-solid fa-fire"></i> 数据类型分布</div>
            </div>
            <div class="panel-body acp-height-auto">
          <div class="box-header">
            <el-row>
              <el-col :span="24">
                <div class="sidecard-bar">
                  <div
                    id="echarts-bar3-chart"
                    :style="{ width: '100%', height: '250px' }"
                  ></div>
                </div>
              </el-col>
            </el-row>
          </div>
            </div>
          </div>

        </el-col>

      <el-col :span="6">
        <div class="grid-content">
          <div class="panel-header">
            <div class="header-title"><i class="fa-solid fa-chart-pie"></i> 数据湖统计信息</div>
          </div>
          <div class="panel-body acp-height-auto" style="padding:0px;">
            <ul class="panel-item-text">
              <li style="width:calc(50% - 0px);margin:0px;padding:10px;" v-for="item in dataLakeStats"
                :key="item.id">
                <div class="item-health-box">
                  <div class="item-health-title">{{ item.title }}</div>
                  <div class="item-health-count">{{ item.count }}</div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </el-col>

    </el-row>
  </div></template>

<script setup>
import { ref } from 'vue';

import * as echarts from "echarts";

/// 声明定义一下echart
const echart = echarts;

const opertionAssets = ref([
  {id:'1' , title:'异常告警信息' , count:45} ,
  {id:'2' , title:'正常运行信息' , count:145} ,
  {id:'3' , title:'告警发送成功' , count:65} ,
  {id:'4' , title:'告警发送失败' , count:85} ,
  {id:'5' , title:'事件提醒次数' , count:45} ,
])

function drawBar2() {
  let barChart = echart.init(
    document.getElementById("echarts-bar2-chart")
  );

  var lineOption;

  // prettier-ignore
  const hours = [
      '12a', '1a', '2a', '3a', '4a', '5a', '6a',
      '7a', '8a', '9a', '10a', '11a',
      '12p', '1p', '2p', '3p', '4p', '5p',
      '6p', '7p', '8p', '9p', '10p', '11p'
  ];
  // prettier-ignore
  const days = ['星期六', '星期五', '星期四','星期三', '星期二', '星期一', '星期日'];

  // prettier-ignore
  const data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0],
                [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2],
                [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0],
                [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0],
                [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4],
                [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5],
                [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3],
                [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6],
                [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5],
                [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8],
                [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4],
                [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0],
                [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2],
                [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8],
                [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1],
                [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]]
      .map(function (item) {
      return [item[1], item[0], item[2] || '-'];
  });

  lineOption= {
    tooltip: {
      position: 'top'
    },
    grid: {
      height: '90%',
      width: '90%',
      top: '1%'
    },
    xAxis: {
      type: 'category',
      data: hours,
      splitArea: {
        show: true
      }
    },
    yAxis: {
      type: 'category',
      data: days,
      splitArea: {
        show: true
      }
    },
    visualMap: {
      min: 0,
      max: 10,
      calculable: true,
      orient: '',
      left: 'left',
      bottom: '0%'
    },
    series: [
      {
        name: '异常次数',
        type: 'heatmap',
        data: data,
        label: {
          show: true
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  barChart.setOption(lineOption);
} ;

function drawBar3() {

  let barChart = echart.init(
    document.getElementById("echarts-bar3-chart")
  );

  let option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '任务数量',
        type: 'pie',
        radius: '85%',
        data: [
          {value: 335, name: '结构化数据'},
          {value: 310, name: '非结构化数据'},
          {value: 234, name: '半结构化数据'}
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  barChart.setOption(option);
}

onMounted(() => {
  drawBar2();
  drawBar3();
});

onUnmounted(() => {
  echart.dispose;
});


const dataLakeStats = ref([
  { id: '1', title: '总数据量', count: '128TB' },
  { id: '2', title: '数据表数量', count: '1,842' },
  { id: '3', title: '数据文件数', count: '25,678' },
  { id: '4', title: '数据连接数', count: '36' },
  { id: '5', title: '每日新增数据', count: '2.4TB' },
  { id: '6', title: '活跃数据资产', count: '1,254' },
]);

const dataLakeCapabilities = [
  {
    imgSrc: "https://img.alicdn.com/imgextra/i3/O1CN01hA2j0J1tJ2XmZJm4v_!!6000000005868-0-tps-550-550.jpg",
    altText: "数据集成图片",
    title: "多源数据集成",
    desc: "支持结构化、半结构化和非结构化数据的批量与实时集成，兼容关系型数据库、NoSQL、日志文件、IoT设备等多种数据源。"
  },
  {
    imgSrc: "https://img.alicdn.com/imgextra/i4/O1CN015c0Dk61sQxR1Dn6Gk_!!6000000005448-0-tps-551-550.jpg",
    altText: "数据治理图片",
    title: "数据治理与合规",
    desc: "提供数据血缘追踪、权限管理、数据脱敏、元数据管理等功能，确保数据使用符合行业规范和法规要求。"
  },
  {
    imgSrc: "https://img.alicdn.com/imgextra/i2/O1CN01xLm9hF1uCn2t2wQjL_!!6000000006067-0-tps-551-550.jpg",
    altText: "数据处理图片",
    title: "分布式数据处理",
    desc: "基于Spark、Flink等引擎实现大规模数据并行处理，支持批处理和流处理，提供高效的数据转换和计算能力。"
  },
  {
    imgSrc: "https://img.alicdn.com/imgextra/i1/O1CN01mZQH9i1rNZBwK8c7h_!!6000000005747-0-tps-551-550.jpg",
    altText: "数据服务图片",
    title: "数据服务与共享",
    desc: "通过标准化接口提供数据服务，支持数据资产目录管理，实现数据的安全共享与复用，加速数据价值释放。"
  }
];

</script>

<style lang="scss" scoped>
.item-health-title {
  margin-bottom: 5px !important;
}

.item-health-count {
  margin-bottom: 5px;
  font-weight: bold;
  color: #444;
}


.item-box {
  ul {
    list-style: none;
    padding: 0px;
    margin: 0px;

    .server-desc {
      font-size: 1.6rem;
      color: #3b5998;
    }

    .active {
      background: #3b5998 !important;
      color: #fff !important;

      .server-desc {
        color: #fff !important;
      }
    }

    li.item-box-info {
      padding: 8px;
      float: left;
      width: 100%;
      background: #f9fbfd;
      border-radius: 5px;
      color: #222;
      margin-bottom: 5px;

      .item-status {
        float: left;
      }

      .status-info {
        float: left;
        margin-left: 20px;

        .item-text {
          margin-bottom: 5px;
          font-size: 12px;
          font-weight: 600;
          line-height: 1.67;
        }

        .item-num {
          height: 22px;
          line-height: 22px;
          font-size: 18px;
          font-weight: 600;

          .total-num {
            font-size: 14px;
          }
        }
      }
    }
  }
}

.sidecard-bar {
  padding: 10px;
}

.item-list {
  .item-icon {
    img {
      width: 94px;
      height: 20px;
    }
  }
}

.box-header {
  .title {
    position: relative;
    height: 20px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.43;
    zoom: 1;
  }

  .box-body {
    // padding: 20px;
    float: left;
    width: 100%;
    border-radius: 5px;
    background: #f9fbfd;

    ul {
      list-style: none;
      padding: 0px;
      margin: 0px;

      li.item-list {
        float: left;
        width: calc(33% - 10px);
        margin-right: 10px;
        background: #f9fbfd;
        padding: 10px;
        border-radius: 5px;
        margin-bottom: 10px;

        .item-icon {
          float: left;
        }

        .item-label {
          float: right;
        }
      }
    }

    .sidecard-pie {
      float: left;
      margin-left: 30px;
    }

    .sidecard {
      float: left;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-left: 45px;
      margin-top: 40px;

      .box-title {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.43;
        margin-bottom: 5px;
      }
    }
  }
}

.item-box {
  display: flex;
  align-items: flex-start;
  padding: 10px;
  border: 1px solid #e8e8e8 ;
  margin-bottom: 10px;
  border-radius: 3px;
  transition: all 0.3s ease;

  &:hover {
    border-color: #1890ff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  img {
    width: 100px;
    border-radius: 4px;
  }

  .content{
    padding: 10px 0;
    margin-left:10px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    gap: 8px;

    .item-title {
      font-size: 14px;
      font-weight: bold;
      color: #1f2329;
    }

    .item-desc {
      font-size: 13px;
      color: #4e5969;
      line-height: 1.6;
    }
  }
}
</style>
